<template>
  <!-- 目标完成情况 -->

  <a-form-model ref="ruleForm" :model="keyrateVO.majorDTO" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
    <a-spin :spinning="loading">
      <!-- 表单 -->
      <div class="flex-row">
        <title-name title="关键绩效指标完成情况"></title-name>
        <a
          style="text-decoration: underline"
          v-if="editModel != 0"
          @click="
            () =>
              $router.push({
                name: 'updateNoAssessment',
                query: { month: form.projectVO.month, editModel: 2 }
              })
          "
          >有不参加考核的指标？点这里申请</a
        >
      </div>

      <s-table
        bordered
        ref="table"
        :page-keys="['pageNum', 'pageSize']"
        tableLayout="fixed"
        size="default"
        rowKey="code"
        :columns="columns"
        :data="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
      >
      </s-table>
      <div style="color: red">*关键指标中红色的指标为项目部已申请不参加考核的指标。</div>
      <title-name class="mt12" title="风险情况统计"></title-name>
      <a-button class="mb12" type="primary" icon="plus" v-if="editModel !== 0" @click="addRisk">新增</a-button>
      <s-table
        bordered
        ref="risk"
        :page-keys="['pageNum', 'pageSize']"
        tableLayout="fixed"
        size="default"
        rowKey="code"
        :columns="riskStatistics"
        :data="loadDataRisk"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
      >
        <template v-for="col in ['analysis', 'takeSteps', 'complete', 'branchCompanyDutyId', 'projectDutyId', 'endTime', 'remarks']" :slot="col" slot-scope="text, record">
          <div :key="col" class="form-item">
            <BaseTextarea v-if="col === 'analysis' || col == 'takeSteps'" v-model="record[col]" :maxLength="1000" :disabled="editModel == 0" />
            <ASelectOrgPeople v-if="col === 'branchCompanyDutyId'" :disabled="editModel == 0" :init="false" :form="keyrateVO" key-value="branchCompanyOrgId" option-key="id" v-model="record[col]"></ASelectOrgPeople>
            <ASelectOrgPeople v-if="col === 'projectDutyId'" :disabled="editModel == 0" :init="false" :form="keyrateVO" key-value="projectOrgId" option-key="id" v-model="record[col]"></ASelectOrgPeople>
            <a-select v-if="col === 'complete'" v-model="record[col]" :disabled="editModel == 0">
              <a-select-option value="1"> 是 </a-select-option>
              <a-select-option value="0"> 否 </a-select-option>
            </a-select>
            <a-date-picker :disabled-date="disabledDate" v-if="col === 'endTime'" v-model="record[col]" :disabled="editModel == 0" placeholder="请选择" value-format="YYYY-MM-DD" />
            <BaseTextarea :maxLength="1000" v-if="col === 'remarks'" :class="col === 'remarks' ? 'remark' : ''" v-model="record[col]" :disabled="editModel == 0" />
          </div>
        </template>
        <template slot="action" slot-scope="text, record, index">
          <a-popconfirm title="确定要删除?" @confirm="delItem(index)">
            <a :disabled="editModel == 0 || record.isDeleted == 1">删除</a>
          </a-popconfirm>
        </template>
      </s-table>
      <title-name class="mt12" title="影响履约重大事项"></title-name>
      <custom-form :isEmit="false" :formList="formList" :form="keyrateVO.majorDTO" :editModel="editModel == 0 ? '' : ''"> </custom-form>
      <title-name class="mt12" title="投诉"></title-name>
      <custom-form :isEmit="false" :formList="formListTs" :form="keyrateVO.majorDTO" :editModel="editModel == 0 ? '' : ''"> </custom-form>
      <template v-if="fileVisible">
        <title-name class="mt12" title="业主确认延期佐证资料"></title-name>
        <tableUpload v-model="form.ownerFileInfoVOS" :disabled="editModel == 0" business-code="PLAN03" />
      </template>
      <!-- 页脚操作栏 -->
      <div class="btn_box tool-btns--fixed" style="bottom: 50px" v-if="editModel != 0">
        <a-button class="button_right" type="primary" @click="() => $emit('previousStep')">上一步</a-button>
        <a-button type="primary" @click="() => $emit('nextStep')">下一步</a-button>
      </div>
    </a-spin>
  </a-form-model>
</template>

<script>
import { api } from '@/api/project/performanceAnalysis'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BSelect from '@/components/BComponents/BSelect'
import { targetComplete, riskStatistics } from '../model.js'
import ASelectOrgPeople from '@/components/Select/ASelectOrgPeople'
import moment from 'moment'
import tableUpload from './tableUpload'
export default {
  name: 'targetComplete',
  extends: new BaseEditPage(),
  components: {
    BSelect,
    ASelectOrgPeople,
    tableUpload
  },

  data() {
    this.riskStatistics = riskStatistics
    return {
      columns: [
        {
          title: '指标',
          children: [
            {
              title: '',
              dataIndex: 'indexName',
              colSpan: 0,
              customRender: (text, row, index) => {
                // return <BaseInput v-model={row.BAManager}></BaseInput>
                let obj = {
                  children: <span class="center" domPropsInnerHTML={row.indexName}></span>,
                  attrs: {}
                }
                let lastIndex = -1
                let firstIndex = this.keyrateVO.keyrateDTOList.findIndex((v) => v.indexName === text)
                this.keyrateVO.keyrateDTOList.map((m, i) => {
                  if (m.indexName == text) {
                    lastIndex = i
                  }
                })
                // 若该行内容和上一行一致，则使其隐藏
                if (index > 0 && this.keyrateVO.keyrateDTOList[index - 1].indexName == text) {
                  obj.attrs.rowSpan = 0
                  // 若不是，则往下合并与改行内容一致行的总行数
                } else {
                  obj.attrs.rowSpan = lastIndex === firstIndex ? 1 : lastIndex + 1 - firstIndex
                }
                //列合并
                if (text === this.keyrateVO.keyrateDTOList[index].indexSecondName) {
                  obj.attrs.colSpan = 0
                }

                return obj
              }
            },
            {
              title: '',
              dataIndex: 'indexSecondName',
              colSpan: 0,
              customRender: (text, row, index) => {
                let obj = {
                  children: (
                    <span
                      class="center"
                      style={{
                        color: row.nocheck ? 'red' : ''
                      }}
                      domPropsInnerHTML={row.indexSecondName}
                    ></span>
                  ),
                  attrs: { colSpan: 1 }
                }
                //列合并
                if (text === this.keyrateVO.keyrateDTOList[index].indexName) {
                  obj.attrs.colSpan = 2
                }

                return obj
              }
            }
          ]
        },

        {
          title: '指标值',
          dataIndex: 'value',
          customRender: (text, row, index) => {
            let obj = {
              children: text,
              attrs: { colSpan: 1 }
            }
            if(row.indexCode == '101'){
              obj.children = text
            } else if (row.indexCode == '102' || row.indexCode == '601') {
              obj.children = <BaseInputNumber min={0} max={10000}   disabled={this.editModel == 0 || row.nocheck == 1 ? true : false} isInt class="form-item" v-model={row.value} onBlur={this.updateList}></BaseInputNumber>
            } else if (row.indexCode != '201' && row.indexCode != '203' && row.indexCode != '204' && row.indexCode != '206' && row.indexCode != '501' && row.indexCode != '701') {
              obj.children = text ? Number(text).toFixed(2) + '%' : text
            }

            return obj
          }
        },

        {
          title: '得分',
          dataIndex: 'scoreTotal',
          scopedSlots: { customRender: 'scoreTotal' },
          children: [
            {
              title: '',
              dataIndex: 'score',
              colSpan: 0,
              customRender: (text, row, index) => {
                let obj = {
                  children: text,
                  attrs: {}
                }
                //列合并
                if (row.indexName === this.keyrateVO.keyrateDTOList[index].indexSecondName) {
                  obj.attrs.colSpan = 0
                }
                return obj
              }
            },
            {
              title: '',
              dataIndex: 'scoreTotal',
              colSpan: 0,
              customRender: (text, row, index) => {
                let obj = {
                  children: text,
                  attrs: {}
                }
                let lastIndex = -1
                let firstIndex = this.keyrateVO.keyrateDTOList.findIndex((v) => v.indexName === row.indexName)
                this.keyrateVO.keyrateDTOList.map((m, i) => {
                  if (m.indexName == row.indexName) {
                    lastIndex = i
                  }
                })
                // 若该行内容和上一行一致，则使其隐藏
                if (index > 0 && this.keyrateVO.keyrateDTOList[index - 1].indexName == row.indexName) {
                  obj.attrs.rowSpan = 0
                  // 若不是，则往下合并与改行内容一致行的总行数
                } else {
                  obj.attrs.rowSpan = lastIndex === firstIndex ? 1 : lastIndex + 1 - firstIndex
                }
                //列合并
                if (row.indexName === this.keyrateVO.keyrateDTOList[index].indexSecondName) {
                  obj.attrs.colSpan = 2
                }
                return obj
              }
            }
          ]
        }
      ],
      loading: false, // 加载控件
      editModel: 1, // 操作状态:0 查看;1 编辑

      id: '',

      loadingBtn: {
        DELETE: false,
        DRAFT: false,
        SUBMITTED: false,
        REJECTED: false
      },
      keyrateVO: { riskDTOList: [], majorDTO: {}, keyrateDTOList: [] },
      loadData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.keyrateVO.keyrateDTOList || []
          })
        })
      },
      loadDataRisk: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.keyrateVO.riskDTOList || []
          })
        })
      },
      listUrl: '/cscec-project-business/file/business/project-fileQuery',
      deleteUrl: '/cscec-project-business/file/business/project-fileDelete',
      uploadList: '/cscec-project-business/file/business/fileUpload',
      businessId: '',
      isShow: false,
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.editModel = 0
          })
        }
      }
    }

    // }
  },
  computed: {
    formListTs() {
      return [
        {
          keyName: 'complaintContent',
          type: 'BaseTextarea',
          disabled: this.editModel == 0,
          label: '投诉',
          attrs: {
            maxLength: 1000
          },

          span: 24
        }
      ]
    },
    formList() {
      return [
        {
          keyName: 'designProblem',
          type: 'BaseTextarea',
          disabled: this.editModel == 0,
          label: '设计问题',
          span: 24,
          attrs: {
            maxLength: 1000
          }
        },
        {
          keyName: 'subProblem',
          type: 'BaseTextarea',
          disabled: this.editModel == 0,
          label: '分包分供招标问题',
          span: 24,
          attrs: {
            maxLength: 1000
          }
        },
        {
          keyName: 'other',
          type: 'BaseTextarea',
          disabled: this.editModel == 0,
          label: '其他',
          span: 24,
          attrs: {
            maxLength: 1000
          }
        }
      ]
    },
    // 附件显示
    fileVisible() {
      return !!Number((this.keyrateVO?.keyrateDTOList || [])[1]?.value)
    }
  },
  mounted() {
    // 不为添加时请求详情
    this.keyrateVO = this.form.keyrateVO
    this.keyrateVO.riskDTOList = this.keyrateVO.riskDTOList || []
    this.businessId = this.$route.query.id
    this.$nextTick(() => {
      this.$refs.risk.refresh(true)
      this.$refs.table.refresh(true)
    })
  },

  methods: {
     disabledDate(current) {
      return current && current > moment().endOf('day')
    },
    updateList() {
      api.updateTableList(this.keyrateVO.keyrateDTOList).then((res) => {
        if (res.code == 200) {
          this.keyrateVO.keyrateDTOList = res.data
          this.$refs.table.refresh(true)
        }
      })
    },
    delItem(index) {
      this.keyrateVO.riskDTOList.splice(index, 1)
      this.$refs.risk.refresh()
    },
    addRisk() {
      this.keyrateVO.riskDTOList.push({
        analysis: '',
        takeSteps: '',
        complete: '0',
        branchCompanyDutyId: '',
        projectDutyId: '',
        endTime: '',
        remarks: ''
      })
    }
  }
}
</script>
<style lang="less" scoped>
.center {
  text-align: center;
  display: inline-block;
  width: 100%;
}
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;

    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }

  .remark {
    .ant-input {
      border-color: inherit !important;
      background-color: initial !important;
    }
  }
}
</style>